<template>
    <div class="guihua">
        <div class="nav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>项目规划</el-breadcrumb-item>
                <el-breadcrumb-item>专项发展规划</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="title">
            <h2>当前规划</h2>
        </div>
        <div class="content">
            <div class="flex-wrap">
                <div class="card" v-for="(item, index) in currentList" :key="index" @click="detail(item.planId)">
                    <div class="row1 space-between">
                        <div><i class="el-icon-document" style="color: #4967CF;"/>{{item.planNo}}</div>
                        <div><span class="right-tag">{{item.planBeginTime | year}}-{{item.planEndTime | year}}年</span></div>
                    </div>
                    <div class="sub-title">
                        <h2>{{item.planName}}</h2>
                    </div>
                    <el-row :gutter="20" class="row">
                        <el-col class="col-left" :span="5">编制单位：</el-col>
                        <el-col class="col-right" :span="5">{{item.compileUnit}}</el-col>
                        <el-col class="col-left" :span="5">编制人：</el-col>
                        <el-col class="col-right" :span="5">{{item.compilePerson}}</el-col>
                    </el-row>
                    <el-row :gutter="20" class="row">
                        <el-col class="col-left" :span="5">编制时间：</el-col>
                        <el-col class="col-right" :span="5">{{item.compileTime | beginAndEndTime}}</el-col>
                        <el-col class="col-left" :span="5">提交时间：</el-col>
                        <el-col class="col-right" :span="5">{{item.createTime | beginAndEndTime}}</el-col>
                    </el-row>
                </div>
                <div class="emty-card" @click="add()">
                    <i class="el-icon-circle-plus-outline" style="color: #4967CF;"/>新增规划
                </div>
            </div>
        </div>
        <div class="title">
            <h2>往年规划</h2>
        </div>
        <div class="search space-between">
            <div class="year-param-card">
                <span class="all">全部</span>
                <span class="year-list">
                    <i class="el-icon-arrow-left"/>
                    <span v-for="(item, index) in yearList" :key="index" class="year-tag">
                        <span @click="selectYear(item)" :class="item == currentYear?'info':''">{{item}}年</span>
                    </span>
                    <i class="el-icon-arrow-right"/>
                </span>
            </div>
            <div class="year-search">
                <el-input placeholder="请输入你要选择的年份" v-model="year" style="width: 240px;">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <div class="content">
            <div class="flex-wrap">
                <div class="card" v-for="(item, index) in pastList" :key="index">
                    <div class="row1 space-between">
                        <div><i class="el-icon-document" style="color: #4967CF;"/>{{item.planNo}}</div>
                        <div><span class="right-tag">{{item.planBeginTime | year}}-{{item.planEndTime | year}}年</span></div>
                    </div>
                    <div class="sub-title">
                        <h2>{{item.planName}}</h2>
                    </div>
                    <el-row :gutter="20" class="row">
                        <el-col class="col-left" :span="5">编制单位：</el-col>
                        <el-col class="col-right" :span="5">{{item.compileUnit}}</el-col>
                        <el-col class="col-left" :span="5">编制人：</el-col>
                        <el-col class="col-right" :span="5">{{item.compilePerson}}</el-col>
                    </el-row>
                    <el-row :gutter="20" class="row">
                        <el-col class="col-left" :span="5">编制时间：</el-col>
                        <el-col class="col-right" :span="5">{{item.compileTime | beginAndEndTime}}</el-col>
                        <el-col class="col-left" :span="5">提交时间：</el-col>
                        <el-col class="col-right" :span="5">{{item.createTime | beginAndEndTime}}</el-col>
                    </el-row>
                    <div class="row2" :class="item.auditResult==1?'success-bg':'danger-bg'">
                        <div>状态：<span :class="item.auditResult==1?'success':'danger'">{{item.auditResult==1?'审定通过':item.auditResult==2?'审定不通过':''}}</span></div>
                    </div>
                </div>
            </div>
            <div style="padding: 10px; text-align: right;">
                <el-pagination background layout="prev, pager, next" :total="60"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            currentList: [],
            pastList: [],
            pageNumber: 1,
            pageSize: 6,
            year: null,
            currentYear: '',
            yearList: [2020, 2019, 2018, 2017, 2016, 2015],
            previousYear: 1
        }
    },
    mounted() {
        let date = new Date();
        this.currentYear = date.getFullYear();
        this.queryCurrentList();
        this.queryPastYears('');
    },
    filters:{
        year(time) {
            return time?time.substring(0, 4):'暂无';
        },
        beginAndEndTime(time) {
            return time?time.substring(0, 10):'暂无';
        }
    },
    methods: {
        /** 查询当前 */
        queryCurrentList() {
            let that = this;
            let day1 = new Date();
            that.axios.get('/cityPlan/getList', {params: {pageNumber: 1, pageSize: 10, compileTime: day1.getFullYear()}})
                .then(function (res) {
                    if (res.code == 1000) {
                        that.currentList = res.data.records;
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        // 选择年份
        selectYear(val) {
            this.previousYear = null;
            this.year = val;
            this.queryPastYears(val);
        },
        /** 查询往年 */
        queryPastYears(year) {
            let that = this;
            that.axios.get('/cityPlan/getList', {params: {pageNumber: this.pageNumber, pageSize: 6, compileTime: year, previousYear: that.previousYear}})
                .then(function (res) {
                    if (res.code == 1000) {
                        that.pastList = res.data.records;
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        add() {
            this.$router.push('/home/tongchou/ZXguihuaAdd');
        },
        detail(planId) {
            this.$router.push({path: '/home/tongchou/ZXguihuaDetail', query: {id: planId}});
        }
    }

}
</script>

<style lang="less" scoped>
    .guihua {
        .flex {
            display: flex;
        }
        .nav {
            line-height: 80px;
        }
        .title {
            margin: 30px 0 20px;
        }
        .content {
            width: 1205px;
            background-color: #ffffff;
            padding: 10px 0;
            .emty-card {
                width: 580px;
                border: 1px solid #E6E6E6;
                margin-left: 15px;
                margin-bottom: 10px;
                font-size: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 196px;
            }
            .card {
                width: 580px;
                border: 1px solid #E6E6E6;
                margin-left: 15px;
                margin-bottom: 10px;
                .col-left {
                    text-align: right;
                }
                .col-right {
                    padding-left: 10px;
                }
                .sub-title {
                    padding-left: 10px;
                    margin: 20px 0;
                }
                .row {
                    margin: 20px 0 10px;
                }
            }
            .flex-wrap {
                display: flex;
                flex-wrap: wrap;
            }
            .line-height{
                line-height: 40px;
            }
            .row1 {
                display: flex;
                width: 100%;
                align-items: center;
                padding: 20px 0 10px 10px;
            }
            .row2 {
                display: flex;
                width: 100%;
                padding: 20px 0 20px 35px;
            }
            .right-tag {
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                background-color: #4967CF;
                color: #ffffff;
                display: flex;
                padding: 5px 20px;
            }
            .success-bg {
                background: rgba(57,173,60,0.04);
            }
            .danger-bg {
                background: rgba(252,29,30,0.04);
            }
            .warning-bg {
                background: rgba(255,102,0,0.06);
            }
            .success{
                color: #39AD3C;
            }
            .danger{
                color: #FC1D1E;
            }
            .warning{
                color: #FF6600;
            }
        }
        .space-between{
            justify-content: space-between;
        }
        .search {
            width: 1205px;
            display: flex;
            padding: 20px 0;
            align-items: center;
            .all {
                display: inline-block;
                width: 50px;
                text-align: center;
            }
            .year-param-card {
                line-height: 50px;
                display: inline;
                background-color: #ffffff;
            }
            .year-search {
                display: inline;
            }
            .year-tag {
                padding: 10px;
                cursor: pointer;
            }
            .info {
                color: #C0C4CC !important;
            }
            .year-list {
                margin: 0 10px;
            }
        }
    }
</style>